<template>
  <div>
    <div class="header">
      <el-row type="flex">
        <el-button type="primary" icon="el-icon-document" size="mini" @click="handleClick(1)">商品信息</el-button>
        <el-button type="primary" icon="el-icon-document" size="mini" @click="handleClick(2)">商品主图</el-button>
        <el-button type="primary" icon="el-icon-document" size="mini" @click="handleClick(3)">商品sku</el-button>
        <el-button type="primary" icon="el-icon-document" size="mini" @click="handleClick(4)">商品详情</el-button>
        <el-button type="primary" icon="el-icon-document" size="mini" @click="handleClick(5)">核心属性</el-button>
        <el-button type="primary" icon="el-icon-document" size="mini" @click="handleClick(6)">审核日志</el-button>
      </el-row>
    </div>
    <div class="content">
      <!-- 商品信息 -->
      <div :class="{show:show==1,hidden:show!=1}">
        <GoodsInfo :goods="rowData" />
      </div>
      <!-- 商品主图 -->
      <div :class="{show:show==2,hidden:show!=2}">
        <div class="row-one" :gutter="10">
          <div v-for="(item,key) in rowData.goods_main_picture" :key="key" class="picture-item">
            <el-image
              style="width: 100px; height: 100px"
              :src="item.picture"
              fit="fill"
            />
          </div>
        </div>
      </div>
      <!-- 商品sku -->
      <div :class="{show:show==3,hidden:show!=3}" />
      <!-- 商品详情 -->
      <div :class="{show:show==4,hidden:show!=4}" />
      <!-- 商品核心属性 -->
      <div :class="{show:show==3,hidden:show!=5}" />
      <!-- 商品审核日志 -->
      <div :class="{show:show==3,hidden:show!=6}" />
    </div>
    <!-- 弹框开始 -->
    <Dialog
      :dialog-visible.sync="dialogVisible"
      :dialog-title="dialogTitle"
      :dialog-type="dialogType"
      :dialog-width="dialogWidth"
    >
      <template #showContent>
        <div v-if="showComponent === 3">
          <div v-if="rowData.goods_sku_array.length">
            <GoodsSku :goods-sku-array="rowData.goods_sku_array" :system-spec-name-array="rowData.system_spec_name_array" :custom-spec-name-array="rowData.custom_spec_name_array" />
          </div>
          <div v-else>
            暂无
          </div>
        </div>
        <div v-if="showComponent === 4">
          <div>
            <!--   {{ rowData.goods_description }} -->
            <GoodsDescription :goods="rowData" />
          </div>
        </div>
        <div v-if="showComponent === 5">
          <div>
            <GoodsProperty :goods="rowData" />
          </div>
        </div>
        <div v-if="showComponent === 6">
          <div>
            <GoodsCheckLog :goods="rowData" />
          </div>
        </div>
      </template>
    </Dialog>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import Dialog from '@/pages/component/laravel-fast-api/v1/dialog'

import GoodsInfo from './tableInfo/goodsInfo'
import GoodsSku from './tableInfo/goodsSku'
import GoodsDescription from './tableInfo/goodsDescription'
import GoodsProperty from './tableInfo/goodsProperty'
import GoodsCheckLog from './tableInfo/goodsCheckLog'

export default
{
  // 组件名称
  name: 'TabelInfo',
  // 组件
  components:
  {
    Dialog,
    GoodsInfo,
    GoodsSku,
    GoodsDescription,
    GoodsProperty,
    GoodsCheckLog

  },
  props:
  {
    rowData: {
      type: Object,
      default: () =>
      {
        return {}
      }
    },
    show: {
      type: Number,
      default: 0
    }

  },
  // 数据
  data()
  {
    return {
      // 控制显示的组件
      showComponent: 1,
      // 弹窗控制
      dialogVisible: false,
      dialogWidth: '98%',
      dialogTitle: '查看',
      // 表单类型 1添加表单 2更新表单
      dialogType: 3
    }
  },
  // 计算属性
  computed:
  {
    ...mapGetters(['regions'])
  },
  // 监听
  watch:
  {

  },
  // 实例创建之前
  beforeCreate()
  {
  },
  // 创建
  created()
  {
  },
  // 挂载之前
  beforeMount()
  {
  },
  // 挂载 --常用
  mounted()
  {
  },
  // 更新之前
  beforeUpdate()
  {
  },
  // 跟新后
  updated()
  {
  },
  // 销毁之前
  beforeDestroy()
  {
  },
  // 销毁后
  destroyed()
  {
  },
  // 方法
  methods:
  {
    handleClick(key)
    {
      this.$emit('update:show', key)
      this.showComponent = key

      if (key === 3)
      {
        this.dialogVisible = true
        this.dialogTitle = '查看商品sku'
      }

      if (key === 4)
      {
        this.dialogVisible = true
        this.dialogTitle = '查看商品详情'
      }

      if (key === 5)
      {
        this.dialogVisible = true
        this.dialogTitle = '核心属性'
      }

      if (key === 6)
      {
        this.dialogVisible = true
        this.dialogTitle = '审核日志'
      }
    }
  }
}
</script>
<style lang='scss' scoped>
.row-one{
   margin-bottom: 1rem;
   width: 100rem;
   height: auto;
   display: flex;
   flex-direction: row;
   justify-content: flex-start;
   .picture-item{
     margin-right: 1rem;
   }
}
.header{
  margin-bottom:1rem;
}
.show{
  display: block;
}
.hidden{
  display: none;
}

</style>
